import React from 'react'
import { ComplianceType, RiskLevel, ProgressStatus, ComplianceStatus } from '@/types/work'
import { useBusiness } from '@/stores/useBusinessStore'

import type { FiltersType } from '@/types/work'

interface ComplianceFiltersProps {
  filters: FiltersType;
  /**
   * 更新过滤器
   */
  setFilters: (filters: Partial<FiltersType>) => void;
  /**
   * 快速定位到最近的进行中(IN_PROGRESS)项所在页
   */
  onJumpToInProgress?: () => void;
}

const ComplianceFilters: React.FC<ComplianceFiltersProps> = ({ 
  filters, 
  setFilters,
  onJumpToInProgress,
}) => {
  // 获取业务系统信息，判断是否为数据安全评估
  const { selectedBusiness } = useBusiness()
  const isDataSecurityAssessment = selectedBusiness?.assessmentType === '105'
  
  const handleFilterChange = (filterName: string, value: string) => {
    setFilters({
      [filterName]: value
    })
  }

  return (
    <div className="bg-card rounded-lg shadow-sm p-3">
      <div className="flex flex-wrap items-center gap-2 min-h-[40px]">
        {/* 标题搜索框 */}
        <div className="flex items-center">
          <label htmlFor="search-title" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
            搜索:
          </label>
          <input
            id="search-title"
            type="text"
            value={filters.searchTerm}
            onChange={(e) => handleFilterChange('searchTerm', e.target.value)}
            placeholder="输入标题关键字"
            className="w-40 rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
          />
        </div>
        {/* 检查项类型筛选 */}
        <div className="flex items-center">
          <label htmlFor="type-filter" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
            类型:
          </label>
          <select
            id="type-filter"
            value={filters.compliance_type}
            onChange={(e) => handleFilterChange('compliance_type', e.target.value)}
            className="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
          >
            <option value="all">全部</option>
            <option value={ComplianceType.RISK}>风险项</option>
            <option value={ComplianceType.GUARANTEE}>保障项</option>
          </select>
        </div>
        
        {/* 风险等级筛选 */}
        <div className="flex items-center">
          <label htmlFor="risk-filter" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
            风险:
          </label>
          <select
            id="risk-filter"
            value={filters.riskLevel}
            onChange={(e) => handleFilterChange('riskLevel', e.target.value)}
            className="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
            disabled={filters.compliance_type === ComplianceType.GUARANTEE}
          >
            <option value="all">全部</option>
            <option value={RiskLevel.HIGH}>高</option>
            <option value={RiskLevel.MEDIUM}>中</option>
            <option value={RiskLevel.LOW}>低</option>
          </select>
        </div>
        
        {/* 保障状态筛选 */}
        <div className="flex items-center">
          <label htmlFor="compliance-status-filter" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
            保障:
          </label>
          <select
            id="compliance-status-filter"
            value={filters.complianceStatus}
            onChange={(e) => handleFilterChange('complianceStatus', e.target.value)}
            className="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
            disabled={filters.compliance_type === ComplianceType.RISK}
          >
            <option value="all">全部</option>
            <option value={ComplianceStatus.NON_COMPLIANT}>不满足</option>
            <option value={ComplianceStatus.PARTIALLY_COMPLIANT}>部分满足</option>
            <option value={ComplianceStatus.FULLY_COMPLIANT}>完全满足</option>
            <option value={ComplianceStatus.NOT_APPLICABLE}>不适用</option>
          </select>
        </div>
        
        {/* 进度状态筛选 */}
        <div className="flex items-center">
          <label htmlFor="progress-filter" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
            状态:
          </label>
          <select
            id="progress-filter"
            value={filters.progressStatus}
            onChange={(e) => handleFilterChange('progressStatus', e.target.value)}
            className="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
          >
            <option value="all">全部</option>
            <option value={ProgressStatus.IN_PROGRESS}>进行中</option>
            <option value={ProgressStatus.REMEDIATION}>整改中</option>
            <option value={ProgressStatus.COMPLETED}>已完成</option>
          </select>
        </div>

        {/* 成熟度等级筛选（仅数据安全评估） */}
        {isDataSecurityAssessment && (
          <div className="flex items-center">
            <label htmlFor="maturity-level-filter" className="text-xs text-muted-foreground mr-2 whitespace-nowrap">
              成熟度:
            </label>
            <select
              id="maturity-level-filter"
              value={filters.maturityLevel}
              onChange={(e) => handleFilterChange('maturityLevel', e.target.value)}
              className="rounded-md border border-input bg-background px-2 py-1 text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
            >
              <option value="all">全部</option>
              <option value="1">等级1</option>
              <option value="2">等级2</option>
              <option value="3">等级3</option>
              <option value="4">等级4</option>
              <option value="5">等级5</option>
            </select>
          </div>
        )}

        {/* 待完成：快速定位到最近进行中项（仅在状态=全部时可用） */}
        <div className="flex items-center">
          <button
            type="button"
            onClick={onJumpToInProgress}
            className="px-3 py-1.5 bg-primary text-primary-foreground rounded-md active:translate-y-[1px] transition-transform text-sm flex items-center"
          >
            待完成
          </button>
        </div>
      </div>
    </div>
  )
}

export default ComplianceFilters

